<template>
	<view>
		<view class="main">
			<view class="main-box">
				<u--text color="#ededed" size="17" lineHeight="70" align="center" text="图表"></u--text>
			</view>
		</view>

		<!-- 统计图表--收入折线图 -->
		<view>
			<div ref="columnChart" class="columnChart"></div>
		</view>

		<!-- 统计图表--支出折线图 -->
		<view>
			<div ref="columnChartPay" class="columnChart"></div>
		</view>

	</view>
</template>

<script>
import * as echarts from 'echarts'  // 引入ECharts库
import { getMonthTotalByIncome } from '../../api/income/income'
import { getMonthTotalByPay } from '../../api/pay/pay'

export default {
	components: {
	},
	data() {
		return {
			title: '素胚勾勒出青花，笔锋浓转淡',
			subTitle: '2020-05-15',
			thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			pay: [],
			income: [],
			user: {},
			monthTotalIncomeData: [],
			monthTotalPayData: []
		};
	},
	created() {
		this.user = JSON.parse(uni.getStorageSync('userinfo'))
		this.monthTotalIncome()
		this.monthTotalPay()
	},
	onLoad() {
	},
	onShow() {
	},
	onHide() {
	},
	mounted() {
		this.initChart()
	},

	beforeDestroy() {
		if (this.pie_chart) {
			this.pie_chart.dispose()
		}
		if (this.column_chart) {
			this.column_chart.dispose()
		}
	},


	methods: {
		// 根据用户id获取12个月内每个月的总支出
		monthTotalPay() {
			let id = {
				id: this.user.id
			}
			getMonthTotalByPay(id).then(res => {
				this.monthTotalPayData = res.data
			})
		},
		// 根据用户id获取12个月内每个月的总收入
		monthTotalIncome() {
			let id = {
				id: this.user.id
			}
			getMonthTotalByIncome(id).then(res => {
				// console.log(res);
				this.monthTotalIncomeData = res.data
			})
		},
		initChart() {

			// 收入
			// 使用定时器减缓1秒图表的生成：用来获得数据-------折线图
			setTimeout(() => {
				//需要定时执行的代码
				let money = this.monthTotalIncomeData.map(item => item.total_income)
				let month = this.monthTotalIncomeData.map(item => item.monthSum)
				const column = this.$refs.columnChart  // 获取图表容器 DOM
				var column_chart = echarts.init(column)  // 创建ECharts实例并传入图表容器
				const column_option = {
					title: {
						text: '近一年的收入情况' // 标题文本
					},
					xAxis: {
						type: 'category', // x轴类型为类目轴
						data: month // x轴类目数据
					},
					yAxis: {
						type: 'value' // y轴类型为数值轴
					},
					grid: {
						containLabel: true
					},
					series: [
						{
							data: money,
							type: 'line',
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontSize: 10
								}
							}
						}
					]
				}
				column_chart.setOption(column_option)
			}, 1000)

			// 支出
			// 使用定时器减缓1秒图表的生成：用来获得数据-------折线图
			setTimeout(() => {
				//需要定时执行的代码
				let moneyPay = this.monthTotalPayData.map(item => item.total_income)
				let monthPay = this.monthTotalPayData.map(item => item.monthSum)
				const column = this.$refs.columnChartPay  // 获取图表容器 DOM
				var column_chart_pay = echarts.init(column)  // 创建ECharts实例并传入图表容器
				const column_option_pay = {
					title: {
						text: '近一年的支出情况' // 标题文本
					},
					xAxis: {
						type: 'category', // x轴类型为类目轴
						data: monthPay // x轴类目数据

					},
					yAxis: {
						type: 'value' // y轴类型为数值轴
					},
					grid: {
						containLabel: true
					},
					series: [
						{
							data: moneyPay,
							type: 'line',
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontSize: 10
								}
							}
						}
					]
				}
				column_chart_pay.setOption(column_option_pay)
			}, 1000)
		}
	}
}

</script>

<style lang="scss" scoped>
page,
body {
	background-color: #fff;
}

.main {
	background-color: #FF9800;
}

.main-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main-box u--text {
	width: 20px;
}

.columnChart {
	width: 100%;
	margin: 20px 0;
	height: 300px;
}

.u-card-wrap {
	background-color: $u-bg-color;
	padding: 1px;
}

.u-body-item {
	font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
}

.u-body-item image {
	width: 120rpx;
	flex: 0 0 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-left: 12rpx;
}
</style>